//定义一个reactiveHandle处理对象
const reactiveHandle = {
  //获取属性值
  get(target, prop) {
    const result = Reflect.get(target,prop);
    console.log("拦截了读取数据",prop,result);
    return result;
   },
  //修改属性值或者添加属性
  set(target, prop, value) { 
    const result = Reflect.set(target, prop, value);
    console.log('拦截了修改数据或者树添加属性',prop,value);
    return result;
  },
  //删除某个属性
  deleteProperty(target, prop) { 
    const result = Reflect.deleteProperty(target,prop);
    console.log('拦截了删除数据',prop);
    return result;
  }
}

//定义一个shallowReactive函数，传入一个目标对象（浅监视）
function shallowReactive(target) {
  //判断当前的目标对象是不是object类型（对象/数组）
  if (target && typeof target === 'object') {
    return new Proxy(target, reactiveHandle);
  }
  //如果传入的数据是基本类型的数据，那么就直接返回
  return target;
}

//定义一个reactive函数，传入一个目标对象（深监视）
function reactive(target) {
  //判断当前的目标对象是不是object类型（对象/数组）
  if (target && typeof target === 'object') {
    //对数组或者是对象中所有数据进行reactive的递归处理
    //先判断当前的数据是不是数组
    if(Array.isArray(target)) {
      //数组的数据要进行遍历操作
      target.forEach((item,index) => {
        target[index] = reactive(item);
      })
    } else {
      //再判断当前的数据是不是对象
      //对象的数据也要进行遍历的操作
      Object.keys(target).forEach(key => {
        target[key] = reactive(target[key])
      })
    }
    return new Proxy(target, reactiveHandle);
  }
  //如果传入的数据是基本类型的数据，那么就直接返回
  return target;
}

//===========================================================

//定义一个readonlyHandler处理对象
const readonlyHandler = {
  get(target,prop) {
    const result = Reflect.get(target,prop);
    console.log('拦截到了读取数据',prop,result);
    return result;
  },
  set(target,prop,value) {
    console.log('只能读取数据，不能修改数据或者添加数据');
    return true;
  },
  deleteProperty(target,prop) {
    console.log('只能读取数据，不能删除数据');
    return true;
  }
}

//定义一个shallowReadonly函数
function shallowReadonly(target) {
  //判断当前的数据是不是对象
  if(target&&typeof target === 'object') {
    return new Proxy(target,readonlyHandler);
  }
  return target;
}

//定义一个readonly函数
function readonly(target) {
  //判断当前的数据是不是对象
  if(target&&typeof target === 'object') {
    //判断target是不是数组
    if(Array.isArray(target)) {
      //遍历数组
      target.forEach((item,index) => {
        target[index] = readonly(item);
      })
    } else {//判断target是不是对象
      //遍历对象
      Object.keys(target).forEach(key => {
        target[key] = readonly(target[key]);
      })
    }
    return new Proxy(target,readonlyHandler);
  }
  return target;
}

//==================================================

//定义一个shallowRef函数
function shallowRef(target) {
  return {
    //保存target数据保存起来
    _value:target,
    get value() {
      console.log('劫持到了读取数据');
      return this._value;
    },
    set value(val) {
      console.log("劫持到了修改数据，准备更新界面",val);
      this._value = val;
    }
  }
}

//定义一个ref函数
function ref(target) {
  target = reactive(target);
  return {
    _is_ref:true,//标识当前的对象的ref对象
    //保存target数据保存起来
    _value:target,
    get value() {
      console.log('劫持到了读取数据');
      return this._value;
    },
    set value(val) {
      console.log("劫持到了修改数据，准备更新界面",val);
      this._value = val;
    }
  }
}

//=============================================================
